.videoCon {
    background-color: rgb(85, 69, 69);
    width: 100%;
    height: 100%;
    position: relative;

    &_video {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        .isplays{
             position: absolute;
             left: 0;
             top: 0;
             width: 100%;
             height: 100%;
             display: flex;
             justify-content: center;
             align-items: center;
             transform: scale(1.5);
             opacity: 0;
             transition: all .2s ease-in 0s;
             background-color: rgba(59, 59, 59, 0.432);
             cursor: pointer;
             svg{
                 fill: #fff;
                 width: 3rem;
                
             }
             &.active{
                transform: scale(1);
                opacity: 1;
             }
            }
        &>video {
            width: 100%;
            height: 100%;
            user-select: none;
        }
    }
    &:hover{
        .videoCon_banner{
            opacity: 1;
        } 
    }
    &_banner {
        transition: all .2s ease 0s;
        position: absolute;
        height: 50px;
        width: 100%;
        background: linear-gradient(to top, #414040, transparent);
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction:column;
        opacity: 1;
        .progress{ 
            width: 100%;
           
            padding: 0 1rem;
            box-sizing: border-box;
            .line{
                background-color: #ffffff38;
                border-radius: 30px;
                height: 7px;
                width: 100%;
                position: relative;
                cursor: pointer;
                transition:all .2s ease 0s;
                // border: 1px solid;
              
                .soruce{
                    opacity: 0;
                     position: absolute;
                     left: -50px;
                     top: -110px;
                     width: 180px;
                     height: 100px;
                     border-radius: 3px;
                     background-color: #000;
                     z-index: 9;
                     transition: opacity .2s ease 0s;
                     pointer-events: none;
                     transform: translateX(0);
                     video{
                        width: 100%;
                        height: 100%;
                        z-index: 999;
                     }
                     &::before{
                         content: '';
                         display: inline-block;
                         width: 8px;
                         height: 8px;
                         background-color: #75b5c0;
                         transform:rotate(45deg);
                         position: absolute;
                         left: calc(50% - 4px);
                         bottom: calc(-4px / 2); 
                         z-index: -1;
                     }
                }
                &:hover{
                    .soruce{
                         opacity: 1;
                    }
                     background-color: #e2e0e063;
                }
                .group{
                    position: absolute;
                    left: 0.3%;
                    top: 20%;
                    border-radius: 30px;
                    width: 10px;
                    height: 60%;  
                    user-select: none;
                    background-color: rgba(252, 242, 242, 0.541);
                }
                .bars{
                    position: absolute;
                    left: 0;
                    top: -5px; 
                    width: 15px;
                    height: 15px;
                    background-color: rgb(124, 191, 253);
                    border-radius: 50%; 
                    cursor: pointer;   
                }
            }

        }
        .banners {
            display: flex;
            align-items: center; 
            justify-content: space-between;
            padding: 0 1rem;
            box-sizing: border-box;
            margin-top: .5rem;
            &>div{
                 display: flex; 
                 align-items: center;
                 justify-content: center;
                 vertical-align: middle;
                 &>div{
                    display: flex; 
                    align-items: center;
                     
                    
                 }
                 &:nth-of-type(2){
                      
                     &>div{
                        margin-left: 1rem;
                     }
               }
                
            }
            .times{
                 color: #fff;
                 font-size: .8rem;
                 margin-left: .5rem ;
                 user-select: none;
            }
        }

        .icon {
            width: 1.3rem;
            height: 1.3rem;
            fill: #fff;
        }
    }
}
.opens{
 
    cursor: pointer;
}
.showtype{
    position: relative;
  
    &:hover{ 
         &>.showtype_progress{
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
         }
    }
    &_progress{ 
         position: absolute;
         left: -45px;
         top: -54px;
         background-color: rgba(158, 157, 157, 0.541);
         border-radius: 3px;
         display: flex;
         align-items: center; 
         padding: .2rem .3rem;
         opacity: 0;
         visibility: hidden;
         transform: translateY(-5px);
         transition: all .2s ease-in 0s;
         &_line{
            
             border-radius: 3px;
             height: 90%;
            //  background-color: #ffffff93;
              display: flex;
              
            //   align-items: center;
              flex-direction: column;
              padding: 0 .3rem;
              &>div{
                  display: flex;
                  align-items: center;
                  font-size: .8rem;
                  color: #fff;
                  white-space: nowrap;
                  margin-top: .3rem;
                  &>div:nth-of-type(1){
                    width: 55px;
                    padding-bottom: .1rem;
                  }
              }
         }
        
    }
}
.fastforward{
    position: relative;
   
    &:hover{ 
         &>.fastforward_progress{
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
         }
    }
    &_progress{ 
         position: absolute;
         left: -20px;
         top: -110px;
         background-color: rgba(158, 157, 157, 0.541);
         width: 60px;
         height: 110px;
         border-radius: 3px;
         display: flex;
         align-items: center;
         justify-content: center;
         opacity: 0;
         visibility: hidden;
         transform: translateY(-5px);
         transition: all .2s ease-in 0s;
         &_line{
             width: 60px;
             border-radius: 3px;
             height: 90%;
            //  background-color: #ffffff93;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              padding: 0 .3rem;
            //   justify-content: space-around;
            .active{
                background-color: #ffffffa8;
             }
            &>div{
                margin: .1rem 0;
                 color: #fff;
                 font-size: .8rem;
                //   background-color: red;
                  border-radius: 2px;
                 width: 100%;
                 text-align: center;
                 cursor: pointer;
                 &:hover{
                     background-color: #ffffffa8;
                 } 
                
            }
         }
         &_bar{
            width: 13px;
            border-radius: 3px;
            height:8px;
            background-color: #ffffffc5;
            position: absolute;
            top: 10px; 
            box-shadow: 0 0 2px 1px #b4b3b39a;
            transform: translateY(10px);
            cursor: pointer;
            &:hover{ 
                background-color: rgb(157, 200, 240);
            }
             
        }
    }
}
.volume{
    position: relative;
    // background-color: red;
    &:hover{ 
         &>.volume_progress{
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
         }
    }
    &_progress{
        visibility: hidden;
         position: absolute;
         left: 0;
         top: -100px;
         background-color: rgba(158, 157, 157, 0.541);
         width:100%;
         height: 100px;
         border-radius: 30px;
         display: flex;
         align-items: center;
         justify-content: center;
         opacity: 0;
         transform: translateY(-5px);
         transition: all .2s ease-in 0s;
         &_line{
             width: 20px;
             border-radius: 15px;
             height: 80%;
            //  background-color: #ffffff93;
              display: flex;
              justify-content: center;
            &>div{
                 width: 3px;
                 height: 100%;
                 background-color: #ffffff42;
            }
         }
         &_bar{
            width: 13px;
            border-radius: 15px;
            height:8px;
            background-color: #ffffffc5;
            position: absolute;
            top: 10px; 
            box-shadow: 0 0 2px 1px #b4b3b39a;
            transform: translateY(10px);
            cursor: pointer;
            &:hover{ 
                background-color: rgb(157, 200, 240);
            }
             
        }
    }
}